<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <!-- meta:元，用于进行网页初始设置。charset:字符编码，UTF-8表示支持汉字，避免因汉字而出现乱码 -->
    <meta charset="UTF-8" />
    <!-- 视口设置 -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <!-- 关键字设置，用于做SEO -->
    <meta
      name="keywords"
      content="网上购物,网上商城,手机,笔记本,电脑,MP3,CD,VCD,DV,相机,数码,配件,手表,存储卡,品优购"
    />
    <!-- 网站描述，用于做SEO -->
    <meta name="description" content="品优购-专业的综合网上购物商城" />
    <!-- 如果用IE打开该网站，用最新版本进行渲染；如果用Chrome打开，将Chrome Frame进行渲染 -->
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <!-- 主要针对国内双核浏览器，优先用webkit渲染（快） -->
    <meta name="renderer" content="webkit" />
    <!-- 注意：在项目开发中，所有的html文件都必须进行如上设置 -->
    <!-- 说明：网站图标通常为.ico/.png/. -->
    <link
      rel="shortcut icon"
      href="../images/favicon.ico"
      type="images/x-icon"
    />
    <title>
      品优购-综合网购首选-正品低价、品优购-专业的综合网上购物商城保障、配送及时、轻松购物！
    </title>
    <!-- 样式重置 -->
    <link rel="stylesheet" href="../style/reset.css" />
    <!-- 图标 -->
    <link rel="stylesheet" href="../style/iconfont.css" />
    <!-- 通用样式 -->
    <link rel="stylesheet" href="../style/common.css" />
    <link rel="stylesheet" href="../style/header.css" />
    <link rel="stylesheet" href="../style/footer.css" />
    <link rel="stylesheet" href="../style/detail.css" />
  </head>
  <body>
    <!-- 头部 -->
    <script src="../javascript/header.js"></script>
    <main class="center">
      <div class="wrap">
        <!-- 面包屑导航 -->
        <div class="crumb">
          首页
          <span class="iconfont icon-youjiantou"></span>
          手机
          <span class="iconfont icon-youjiantou"></span>
          HUAWEI Mate系列
          <span class="iconfont icon-youjiantou"></span>
          HUAWEI Mate 40 Pro
        </div>
        <!-- 产品介绍 -->
        <div class="product_intro clearfix">
          <!-- 预览区域 -->
          <div class="preview fl">
            <div class="preview_img" id="zoom">
              <img
                src="../images/detail/2.1.png"
                bimg="../images/detail/2.1.png"
                height="398px"
              />
            </div>
            <div class="preview_list">
              <a href="javascript:;" class="arrow_prev"></a>
              <div class="list_item">
                <ul>
                  <li>
                    <img src="../images/detail/1.1.png" width="56px"/>
                  </li>
                  <li>
                    <img src="../images/detail/2.1.png" width="56px" />
                  </li>
                  <li>
                    <img src="../images/detail/3.1.png" width="56px" />
                  </li>
                  <li>
                    <img src="../images/detail/4.1.png" width="56px" />
                  </li>
                  <li>
                    <img src="../images/detail/5.1.png" width="56px" />
                  </li>
                </ul>
              </div>
              <a href="javascript:;" class="arrow_next"></a>
            </div>
          </div>
          <!-- 产品介绍 -->
          <div class="item_info fr">
            <div class="sku_name">HUAWEI Mate 40 Pro</div>
            <div class="summary">
              <dl class="summary_price">
                <dt>价格</dt>
                <dd>
                  <i class="price">￥6999.00</i>
                </dd>
              </dl>
              <dl class="spec">
                <dt>颜色</dt>
                <dd>
                  <a spec_value_id="77" href="javascript:;" class="current"
                    >亮黑色</a
                  >
                  <a spec_value_id="78" href="javascript:;" class="">釉白色</a>
                  <a spec_value_id="79" href="javascript:;" class="">秘银色</a>
                  <a spec_value_id="80" href="javascript:;" class=""
                    >夏日胡杨</a
                  >
                  <a spec_value_id="81" href="javascript:;" class=""
                    >秋日胡杨</a
                  >
                </dd>
              </dl>
              <dl class="spec">
                <dt>版本</dt>
                <dd>
                  <a spec_value_id="82" href="javascript:;" class="current"
                    >5G全网通 8GB+256GB</a
                  >
                  <a spec_value_id="83" href="javascript:;" class=""
                    >5G全网通 8GB+512GB</a
                  >
                  <a spec_value_id="84" href="javascript:;" class=""
                    >5G全网通 8GB+128GB</a
                  >
                </dd>
              </dl>
            </div>
            <div class="choose_btns">
              <div class="choose_amount">
                <input id="number" type="text" value="1" />
                <a href="javascript:;" class="add">+</a>
                <a href="javascript:;" class="reduce">-</a>
              </div>
              <a href="../pages/add_cart.html" id="add_shop_car" class="addcar"
                >加入购物车</a
              >
            </div>
          </div>
        </div>
        <!-- 产品细节 -->
        <div class="product_detail">
          <div class="detail_tab_list" id="detail_tab_list">
            <ul id="myList">
              <li >商品介绍</li>
              <li class="current">商品属性</li>
            </ul>
          </div>
          <div class="detail_tab_con">
            <div class="item" style="display: none">
              <p>
                <img src="../images/detail/prod1.jpg" style="max-width: 100%" />
                <img src="../images/detail/prod2.jpg" style="max-width: 100%" />
                <img src="../images/detail/prod3.jpg" style="max-width: 100%" />
                <img src="../images/detail/prod4.jpg" style="max-width: 100%" />
                <img src="../images/detail/prod5.jpg" style="max-width: 100%" />
                <img src="../images/detail/prod6.jpg" style="max-width: 100%" />
                <img src="../images/detail/prod7.jpg" style="max-width: 100%" />
                <br />
              </p>
            </div>
            <div class="item" style="display: block">
              <li>版本类型: 中国大陆</li>
              <li>操作系统: EMUI 11.0</li>
            </div>
          </div>
        </div>
      </div>
    </main>
    <script src="../javascript/footer.js"></script>
  </body>

  <!-- 样式改变 -->
  <!-- <script>
    // 获取 li 列表
    var listItems = document.querySelectorAll("#myList li");
    var contents = document.querySelectorAll(".content");
    var previousItem = null;

    // 给每个 li 元素添加点击事件
    listItems.forEach(function (item) {
      item.addEventListener("click", function () {
        var target = this.getAttribute("data-target");
        // 移除之前选中项的样式
        if (previousItem !== null) {
          previousItem.classList.remove("current1");
          document.getElementById(
            previousItem.getAttribute("data-target")
          ).style.display = "none";
        }

        // 设置当前选中项的样式
        this.classList.add("current1");
        document.getElementById(target).style.display = "block";
        previousItem = this;
      });
    });
  </script> -->
  <script src="../javascript/jquery.js"></script>
  <script src="../javascript/jquery.zoom.min.js"></script>
  <script>
    $(function () {
      // 规格值ids 到 规格商品id的映射关系
      var valueIdsMap = {
        "77_82": {
          id: 47,
          price: "6999.00",
        },
        "77_83": {
          id: 48,
          price: "7999.00",
        },
        "77_84": {
          id: 49,
          price: "6499.00",
        },
        "78_82": {
          id: 50,
          price: "6999.00",
        },
        "78_83": {
          id: 51,
          price: "7999.00",
        },
        "78_84": {
          id: 52,
          price: "6499.00",
        },
        "79_82": {
          id: 53,
          price: "6999.00",
        },
        "79_83": {
          id: 54,
          price: "7999.00",
        },
        "79_84": {
          id: 55,
          price: "6499.00",
        },
        "80_82": {
          id: 56,
          price: "6999.00",
        },
        "80_83": {
          id: 57,
          price: "7999.00",
        },
        "80_84": {
          id: 58,
          price: "6499.00",
        },
        "81_82": {
          id: 59,
          price: "6999.00",
        },
        "81_83": {
          id: 60,
          price: "7999.00",
        },
        "81_84": {
          id: 61,
          price: "6499.00",
        },
      };
      // 照片放大
      $("#zoom").zoom({
        URL: $("#zoom img").attr("bimg"),
      });
      // 商品相册图片预览小图鼠标悬浮事件绑定
      $(".preview_list .list_item li").on("mouseover", function () {
        $(this).addClass("current").siblings("li").removeClass("current");
        var img = $(this).find("img").attr("src");
        var bimg = $(this).find("img").attr("bimg");
        $(this).closest(".preview").find(".preview_img img").attr("src", img);
        $(this).closest(".preview").find(".preview_img img").attr("bimg", bimg);

        // 商品相册图片预览放大
        $("#zoom").zoom({
          url: $("#zoom img").attr("bimg"),
        });
      });
      // 规格值选中效果
      $(".spec")
        .find("a")
        .click(function () {
          // 给当前行标签 移除current这个class
          $(this).siblings().removeClass("current");
          // 再给当前点击的a标签加上current类
          $(this).addClass("current");

          // 获取选中的规格值的组合
          var valueIds = "";
          $(".spec .current").each(function (i, v) {
            valueIds += $(v).attr("spec_value_id") + "_";
          });
          // 去除最后一个下划线 valueIds = '19_21_' 转换成valueIds = '19_21'
          valueIds = valueIds.slice(0, -1);
          // 获取对应的商品SKU的id值
          var specGoodsPrice = valueIdsMap[valueIds].price;
          // 将价格显示到页面
          $(".price").html("￥" + specGoodsPrice);
        });
      // 加号
      $(".add").click(function () {
        // 获取数量
        let number = parseInt($("#number").val());
        // 计算新的数量
        number += 1;
        // 展示新的数量
        $("#number").val(number);
      });

      // 减号
      $(".reduce").click(function () {
        // 获取数量
        let number = parseInt($("#number").val());
        // 计算新的数量
        if (number == 1) return;
        number -= 1;
        // 展示新的数量
        $("#number").val(number);
      });
      // 加入购物车
      $("#add_shop_car").click(function () {
        // 获取选中的规格值的组合
        var valueIds = "";
        $(".spec .current").each(function (i, v) {
          valueIds += $(v).attr("spec_value_id") + "_";
        });
        // 去除最后一个下划线
        valueIds = valueIds.slice(0, -1);
        // 获取对应的商品SKU的id值，考虑到部分商品可能没有SKU，需要使用三元判断
        var skuId = valueIdsMap[valueIds] ? valueIdsMap[valueIds].id : "";
        // 将skuId放到隐藏表单中
        $("input[name=sku_id]").val(skuId);
        // 获取购买数量
        var number = $("#number").val();
        // 将购买数量放到隐藏表单中
        $("input[name=number]").val(number);
        // 提交表单
        $("form").submit();
      });
      // 商品详情选项卡切换
      // 1. 点击上部的li，当前li添加current类，其余兄弟移除类
      $(".detail_tab_list li").click(function () {
        // 链式编程操作
        $(this).addClass("current").siblings().removeClass("current");
        // 2. 点击的同时，得到当前li的索引号
        var index = $(this).index();
        // 3. 让下部里面相应索引号的item显示，其余的item隐藏
        $(".detail_tab_con .item").eq(index).show().siblings().hide();
      });

      //图片预览小图移动效果,页面加载时触发
      var tempLength = 0;
      //临时变量,当前移动的长度
      var viewNum = 4;
      //设置每次显示图片的个数量
      var moveNum = 2;
      //每次移动的数量
      var moveTime = 300;
      //移动速度,毫秒
      var scrollDiv = $(".preview_list .list_item ul");
      //进行移动动画的容器
      var scrollItems = $(".preview_list .list_item ul li");
      //移动容器里的集合
      var moveLength = scrollItems.eq(0).width() * moveNum;
      //计算每次移动的长度
      var countLength =
        (scrollItems.length - viewNum) * scrollItems.eq(0).width();
      //计算总长度,总个数*单个长度

      //下一张
      $(".preview_list .arrow_next").on("click", function () {
        if (tempLength < countLength) {
          if (countLength - tempLength > moveLength) {
            scrollDiv.animate(
              {
                left: "-=" + moveLength + "px",
              },
              moveTime
            );
            tempLength += moveLength;
          } else {
            scrollDiv.animate(
              {
                left: "-=" + (countLength - tempLength) + "px",
              },
              moveTime
            );
            tempLength += countLength - tempLength;
          }
        }
      });
      //上一张
      $(".preview_list .arrow_prev").on("click", function () {
        if (tempLength > 0) {
          if (tempLength > moveLength) {
            scrollDiv.animate(
              {
                left: "+=" + moveLength + "px",
              },
              moveTime
            );
            tempLength -= moveLength;
          } else {
            scrollDiv.animate(
              {
                left: "+=" + tempLength + "px",
              },
              moveTime
            );
            tempLength = 0;
          }
        }
      });
    });
  </script>
</html>
